<template>
  <el-container id="app" class="main login">
    <el-header height="66px" class="header-logo">
      <div class="container">
        <svg class="icon icon-logo">
          <use xlink:href="#iconlogo" />
        </svg>
      </div>
    </el-header>
    <el-main class="login-main">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <el-image class="float-right"  src="http://cdn.hterobot.com/vue/public/images/wx-pic1.png" fit="fit"></el-image>
          </div>
          <div class="col position-relative">
            <el-container id="box-card">
              <el-header height="30px">
                <div class="text-center">绑定微信</div>
              </el-header>
              <el-main>
                <el-form ref="form" :rules="rules" :model="ruleForm2" label-width="0px">
                  <el-form-item label prop="phonenumber">
                    <el-input placeholder="手机号码" v-model="ruleForm2.phonenumber">
                      <svg slot="prefix" class="icon icon-login">
                        <use xlink:href="#icontubiaozhizuomoban" />
                      </svg>
                    </el-input>
                  </el-form-item>
                  <el-form-item label prop="password">
                    <el-input
                      placeholder="密码"
                      :type="close?'text':'password'"
                      v-model="ruleForm2.password"
                    >
                      <svg slot="prefix" class="icon icon-login">
                        <use xlink:href="#iconmima" />
                      </svg>
                      <svg slot="suffix" class="icon icon-login" @click="close = !close">
                        <use :xlink:href="`${close?'#iconzhengyan':'#iconbiyan'} `" />
                      </svg>
                    </el-input>
                  </el-form-item>
                  <el-form-item label prop="yzm">
                        <el-input
                          class="phone_num float-left"
                          placeholder="验证码"
                          @keyup.13="submitForm('ruleForm2')"
                          v-model="ruleForm2.yzm"
                          style="width: 175px;"
                        >
                          <svg slot="prefix" class="icon icon-login">
                            <use xlink:href="#iconyanzhengma" />
                          </svg>
                        </el-input>
                        <button
                          type="button"
                          :disabled="disabled"
                          @click="getyzm"
                          class="verification_code float-right"
                          v-text="!disabled?text:time"
                        ></button>
                  </el-form-item>
                  <el-form-item>
                    <button
                      type="button"
                      class="submit"
                      @click="soonbind"
                    >立即绑定</button>
                  </el-form-item>
                </el-form>
              </el-main>
            </el-container>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { asyncfind_getCode, bindwechat } from "../plugins/api.js";

export default {
  name: "app",
  data() {
    return {
      ruleForm2: {
        phonenumber: "",
        password: "",
        unionid: "",
        yzm: ""
      },
      yzm: "",
      qh: [
        {
          aleph: "zg",
          continent: 0,
          id: "0086",
          length: 11,
          pinyin: "zhongguo",
          value: "中国 0086"
        },
        {
          aleph: "zgtw",
          continent: 0,
          id: "0886",
          length: 9,
          pinyin: "zhongguotaiwan",
          value: "中国台湾 0886"
        }
      ],
      time: 60,
      timer: Object,
      disabled: false,
      close: false,
      text: "验证码",
      rules: {
        yam: [{ min: 4, max: 4, message: "请填写验证码", trigger: "change" }],
        phonenumber: [
          {
            validator: /^1[3456789]\d{9}$/,
            message: "请填写有效手机号",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.GetQueryString("unionid");
  },
  methods: {
    async getyzm() {
      try {
        await asyncfind_getCode({ phonenumber: this.ruleForm2.phonenumber });
        var a = this.hc;
        this.disabled = true;
        this.timer = setInterval(a, 1000);
      } catch (err) {
        this.$alert(err);
      }
    },
    hc() {
      var a = this.time;
      this.time--;
      if (a == 0) {
        clearInterval(this.timer);
        this.time = 60;
      }
    },
    async next2() {
      for (var err in this.iserr) {
        if (this.iserr[err] == false) {
          this.$alert("信息不完整");
          return false;
        }
      }
    },
    GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      var context = "";
      if (r != null) context = r[2];
      reg = null;
      r = null;
      this.ruleForm2.unionid =
        context == null || context == "" || context == "undefined"
          ? ""
          : context;
    },
    soonbind() {
      bindwechat(this.ruleForm2)
        .then(() => {
          location.href = '/'
        })
        .catch(err => {
          this.$alert(err);
        });
    }
  }
};
</script>

<style>
@import "./style.css";
</style>